<template>
    <div>
        <el-card>
            <div class="border-bottom pd-b-20">
                月度每日统计
            </div>
            <div class="mg-t-20">
                <div class="flex flex-jc-sb mg-b-20">
                    <div class="hint-label flex items-center flex-1 mg-r-20">
                        默认显示近30天内日保数据
                    </div>
                    <div>
                        <el-button type="primary" :loading="loading" @click="doExport">
                            <el-icon class="el-icon--right">
                                <Upload />
                            </el-icon>
                            导出列表
                        </el-button>
                    </div>
                </div>
                <div ref="tableRef">
                    <tableComponent class="box" :table-header="tableHeader" :table-data="tableData" no-pagination :max-height="maxHeight"/>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { ref, onMounted, onActivated } from 'vue'
import { ElMessageBox } from 'element-plus'
import baseurl from 'api/env.ts'
import { wesureStatisticsMonthlyApi, dailyInsureListExport } from 'api/tools/insuranceData.ts'

import tableComponent from '@/components/tableComponent/index.vue'
const tableRef = ref(null)
const maxHeight = ref('auto')

const tableHeader = ref([
    {
        prop: 'date',
        label: '日期',
        // width: 100
    },
    {
        prop: 'dailyRecharge',
        label: '新增充值',
        // width: 100
    },
    {
        prop: 'dailyRechargeClients',
        label: '当日充值客户',
        // width: 100
    },
    // {
    //     prop: 'dailyInsuredEmployees',
    //     label: '当日投保客户数',
    //     // width: 150
    // },
    {
        prop: 'dailyInsuredEmployees',
        label: '当日投保人数',
        // width: 150
    },
    {
        prop: 'dailyInsurFees',
        label: '当日保费',
        // width: 150
    },
    {
        prop: 'dailyInsurCost',
        label: '当日成本保费',
        // width: 150
    }
])
const tableData = ref([])

const getList = () => {
    wesureStatisticsMonthlyApi().then(res => {
        tableData.value = res || []
    })
}

const loading = ref(false)
const handleExport = () => {
    if (loading.value) return
    loading.value = true
    dailyInsureListExport().then(res => {
        const href = baseurl + '/common/download?delete=true&fileName=' + res
        downLoad(href)
    }).finally(res => {
        loading.value = false
    })
}

const doExport = () => {
    ElMessageBox.confirm(
        '是否确认导出数据?',
        '提示',
        {
            type: 'warning',
        }
    ).then(res=> {
        handleExport()
    })
}

const downLoad = (href) => {
    const a = document.createElement('a')
    a.download = href
    a.href = href
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

const calcTableHeight = () => {
    maxHeight.value = tableRef.value.$el?.offsetHeight || tableRef.value.offsetHeight
}

onMounted(() => {
    // calcTableHeight()
    // getList()
})

onActivated(() => {
    calcTableHeight()
    getList()
})
defineExpose({calcTableHeight})
</script>
<style lang="scss" scoped>
.hint-label {
    color: #ff7e47;
    background: #fff1eb;
    padding: 0 20px;
}
.box {
    height: calc(100vh - 315px);
    overflow: auto;
}
</style>